<!DOCTYPE html>

<html>

<head>
    <!-- 页面meta -->

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>后台管理</title>

    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">

    <!-- 引入样式 -->

    <link rel="stylesheet" href="../plugins/elementui/index.css">

    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">

    <link rel="stylesheet" href="../css/mystyle.css">
    <!-- 引入组件库 -->

    <script src="../js/vue.js"></script>

    <script src="../plugins/elementui/index.js"></script>

    <script type="text/javascript" src="../js/jquery.min.js"></script>

    <script src="../js/axios-0.18.0.js"></script>

    <script src="../http/request.js"></script>

    <script src="../utils/dateFormat.js"></script>

    <style>
        .margin-left-small {
            margin-left: 20px;
        }
    </style>
</head>

<body class="hold-transition">
    <div id="app">
        <div class="app-container">
            <div class="box">

                <div class="filter-container">

                    <el-input placeholder="活动名称" v-model="pagination.queryString"
                        style="width: 200px; margin-right: 20px;" class="filter-item"></el-input>

                    <el-button type="success" class="margin-left-small" @click="getByCondition()"
                        class="dalfBut">查询</el-button>

                    <el-button type="primary" class="margin-left-small" @click="getByCondition()"
                        class="dalfBut">新增</el-button>

                </div>

                <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>

                    <el-table-column prop="activityId" type="index" align="center" label="序号"></el-table-column>

                    <el-table-column prop="activityName" label="活动名字" align="center"></el-table-column>

                    <el-table-column prop="activityIntroduce" label="活动介绍" align="center"></el-table-column>

                    <el-table-column prop="activityStartTime" label="活动开始时间" align="center"></el-table-column>

                    <el-table-column prop="activityEndTime" label="活动结束时间" align="center"></el-table-column>

                    <!-- 跑跑币-->
                    <el-table-column prop="popping" label="活动行为" align="center"></el-table-column>


                    <el-table-column prop="activityStatus" label="活动状态" align="center">
                        <template slot-scope="scope">
                            {{scope.row.activityStatus === 1?'启用':'禁用'}}
                        </template>
                    </el-table-column>

                    <!-- 跑跑币-->
                    <el-table-column prop="activityImg" label="活动图片" align="center"></el-table-column>

                    <!-- 跑跑币-->
                    <el-table-column prop="activityUrl" label="活动url" align="center"></el-table-column>

                    <!-- 跑跑币-->
                    <el-table-column prop="poppingUrl" label="弹出对话框确认url" align="center"></el-table-column>

                    <el-table-column label="操作" align="center">

                        <template slot-scope="scope">

                            <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
                            <el-button type="success" size="mini" @click="handleActivate(scope.row)">激活</el-button>

                        </template>

                    </el-table-column>

                </el-table>

            </div>
            <!-- 编辑标签弹层 -->
            <div class="add-form">

                <el-dialog title="编辑检查项" :visible.sync="dialogFormVisible4Edit">

                    <el-form ref="dataEditForm" :model="formData" :rules="rules" label-position="right"
                        label-width="100px">

                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="活动名称" prop="activityName">
                                    <el-input v-model="formData.activityName" />
                                </el-form-item>
                            </el-col>

                            <el-col :span="12">
                                <el-form-item label="活动介绍" prop="activityIntroduce">
                                    <el-input v-model="formData.activityIntroduce" />
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="活动开始时间">
                                    <el-input v-model="formData.activityStartTime" type="address"></el-input>
                                </el-form-item>
                            </el-col>

                            <el-col :span="12">
                                <el-form-item label="活动结束时间">
                                    <el-input v-model="formData.activityEndTime" type="address"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="活动行为">
                                    <el-input v-model="formData.popping" type="address"></el-input>
                                </el-form-item>
                            </el-col>

                            <el-col :span="12">
                                <el-form-item label="活动url">
                                    <el-input v-model="formData.activityUrl" type="address"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="活动图片">
                                    <el-input v-model="formData.activityImg" type="address"></el-input>
                                </el-form-item>
                            </el-col>


                            <el-col :span="12">
                                <el-form-item label="活动状态">
                                    <el-input v-model="formData.activityStatus" type="address"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="弹出对话框确认url">
                                    <el-input v-model="formData.poppingUrl" type="address"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>

                    </el-form>

                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible4Edit = false">取消</el-button>
                        <el-button type="primary" @click="handleEdit()">确定</el-button>
                    </div>

                </el-dialog>

                <!-- 编辑标签弹层 -->
                <el-dialog title="用户地址" :visible.sync="editDialogFormVisible">
                    <el-form>
                        <el-form-item label="区域" :label-width="formLabelWidth">
                            <template>
                                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
                                    @change="handleCheckAllChange">全选</el-checkbox>
                                <el-checkbox-group v-model="formData_.area">
                                    <el-checkbox label="静园1"></el-checkbox>
                                    <el-checkbox label="静园2"></el-checkbox>
                                    <el-checkbox label="静园3"></el-checkbox>
                                    <el-checkbox label="静园4A"></el-checkbox>
                                    <el-checkbox label="静园4B"></el-checkbox>
                                    <el-checkbox label="静园5A"></el-checkbox>
                                    <el-checkbox label="静园5B"></el-checkbox>
                                    <el-checkbox label="静园6A"></el-checkbox>
                                    <el-checkbox label="静园6B"></el-checkbox>
                                    <el-checkbox label="静园7A"></el-checkbox>
                                    <el-checkbox label="静园7B"></el-checkbox>
                                    <el-checkbox label="静园8A"></el-checkbox>
                                    <el-checkbox label="静园8B"></el-checkbox>
                                    <el-checkbox label="静园9A"></el-checkbox>
                                    <el-checkbox label="静园9B"></el-checkbox>
                                    <el-checkbox label="静园10A"></el-checkbox>
                                    <el-checkbox label="静园10B"></el-checkbox>
                                    <el-checkbox label="静园11A"></el-checkbox>
                                    <el-checkbox label="静园11B"></el-checkbox>
                                    <el-checkbox label="静园12A"></el-checkbox>
                                    <el-checkbox label="静园12B"></el-checkbox>
                                    <el-checkbox label="静园13A"></el-checkbox>
                                    <el-checkbox label="静园13B"></el-checkbox>
                                    <el-checkbox label="静园14A"></el-checkbox>
                                    <el-checkbox label="静园14B"></el-checkbox>
                                    <el-checkbox label="静园15A"></el-checkbox>
                                    <el-checkbox label="静园15B"></el-checkbox>
                                    <el-checkbox label="静园16"></el-checkbox>

                                    <el-checkbox label="怡园1A"></el-checkbox>
                                    <el-checkbox label="怡园1B"></el-checkbox>
                                    <el-checkbox label="怡园2A"></el-checkbox>
                                    <el-checkbox label="怡园2B"></el-checkbox>
                                    <el-checkbox label="怡园3A"></el-checkbox>
                                    <el-checkbox label="怡园3B"></el-checkbox>
                                    <el-checkbox label="怡园4A"></el-checkbox>
                                    <el-checkbox label="怡园4B"></el-checkbox>
                                    <el-checkbox label="怡园5A"></el-checkbox>
                                    <el-checkbox label="怡园5B"></el-checkbox>
                                    <el-checkbox label="怡园6A"></el-checkbox>
                                    <el-checkbox label="怡园6B"></el-checkbox>
                                    <el-checkbox label="怡园7A"></el-checkbox>
                                    <el-checkbox label="怡园7B"></el-checkbox>
                                    <el-checkbox label="怡园8A"></el-checkbox>
                                    <el-checkbox label="怡园8B"></el-checkbox>
                                    <el-checkbox label="怡园9A"></el-checkbox>
                                    <el-checkbox label="怡园9B"></el-checkbox>
                                    <el-checkbox label="怡园10A"></el-checkbox>
                                    <el-checkbox label="怡园10B"></el-checkbox>
                                    <el-checkbox label="怡园11A"></el-checkbox>
                                    <el-checkbox label="怡园11B"></el-checkbox>
                                    <el-checkbox label="怡园12A"></el-checkbox>
                                    <el-checkbox label="怡园12B"></el-checkbox>
                                    <el-checkbox label="怡园13"></el-checkbox>
                                    <el-checkbox label="怡园14"></el-checkbox>
                                    <el-checkbox label="怡园15"></el-checkbox>
                                    <el-checkbox label="怡园16"></el-checkbox>

                                    <el-checkbox label="弘毅楼A"></el-checkbox>
                                    <el-checkbox label="弘毅楼B"></el-checkbox>
                                    <el-checkbox label="弘毅楼C"></el-checkbox>
                                    <el-checkbox label="文锦苑1"></el-checkbox>
                                    <el-checkbox label="文锦苑2"></el-checkbox>
                                    <el-checkbox label="文锦苑3"></el-checkbox>
                                    <el-checkbox label="文澜苑1"></el-checkbox>
                                    <el-checkbox label="文澜苑2"></el-checkbox>
                                    <el-checkbox label="文韬苑1"></el-checkbox>
                                    <el-checkbox label="文韬苑2"></el-checkbox>
                                    <el-checkbox label="文韬苑3"></el-checkbox>
                                    <el-checkbox label="清逸苑1"></el-checkbox>
                                    <el-checkbox label="清逸苑2"></el-checkbox>
                                    <el-checkbox label="清逸苑3"></el-checkbox>
                                    <el-checkbox label="清雅苑1"></el-checkbox>
                                    <el-checkbox label="清雅苑2"></el-checkbox>
                                    <el-checkbox label="清隽苑1"></el-checkbox>
                                    <el-checkbox label="清隽苑2"></el-checkbox>
                                    <el-checkbox label="清隽苑3"></el-checkbox>

                                    <el-checkbox label="西操场"></el-checkbox>
                                    <el-checkbox label="西餐厅"></el-checkbox>
                                    <el-checkbox label="西浴"></el-checkbox>
                                    <el-checkbox label="西服务中心"></el-checkbox>
                                    <el-checkbox label="西篮球场"></el-checkbox>
                                    <el-checkbox label="东操场"></el-checkbox>
                                    <el-checkbox label="东餐厅"></el-checkbox>
                                    <el-checkbox label="东浴"></el-checkbox>
                                    <el-checkbox label="东服务中心"></el-checkbox>
                                    <el-checkbox label="东篮球场"></el-checkbox>
                                    <el-checkbox label="图书馆"></el-checkbox>
                                    <el-checkbox label="体育馆"></el-checkbox>
                                    <el-checkbox label="菜鸟驿站"></el-checkbox>
                                </el-checkbox-group>
                            </template>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="editDialogFormVisible = false">取 消</el-button>

                        <el-button type="primary" @click="selectByAddress()">确 定</el-button>

                    </div>




                </el-dialog>

            </div>

        </div>

    </div>

</body>



<script>
    var vue = new Vue({

        el: '#app',
        data: {
            value1: '',
            pagination: {},
            dataList: [],//当前页要展示的列表数据
            formData: {},//表单数据
            formData_: {
                area: [],
                id: 0
            },
            isIndeterminate: true,
            checkAll: false,
            dialogFormVisible: false,//控制表单是否可见
            dialogFormVisible4Edit: false,//编辑表单是否可见
            editDialogFormVisible: false,
            formLabelWidth: '100px',
            area: [],
            rules: {//校验规则
                type: [{ required: true, message: '帮手类别为必填项', trigger: 'blur' }],
                name: [{ required: true, message: '帮手电话号为必填项', trigger: 'blur' }]
            }
        },

        //钩子函数，VUE对象初始化完成后自动执行
        mounted() {
            this.getAll();
        },
        methods: {
            //列表
            getAll() {
                //发送ajax请求
                axios.get("/activity/getAll").then((res) => {
                    console.log(res.data)
                    this.dataList = res.data;
                    // console.log("dataList" + JSON.stringify(this.dataList))
                });
            },

            //根据手机号查询
            handleSizeChange: function (val) {
                alert("每页记录数变化" + val)
            },
            handleCurrentChange: function (val) {
                alert("页码发生变化" + val)
            },
            handleCheckAllChange(val) {
                console.log(val);
                if (val) {
                    let check = document.querySelectorAll('.el-checkbox')
                    // console.log(check);
                    this.formData_.area = [];
                    for (i = 1; i < check.length; i++) {
                        this.formData_.area[i-1] = check[i].innerText
                    }
                    // console.log(this.formData_.area);
                }else{
                    this.formData_.area = [];
                    // console.log(this.formData_.area);
                }
            },
            // getByCondition() {
            //     // start = this.convert(this.value1[0])
            //     // end = this.convert(this.value1[1])
            //     let start
            //     let end
            //     if (typeof (this.value1[0]) == "undefined") {
            //         start = null
            //     } else {
            //         start = this.convert(this.value1[0])
            //     }

            //     if (typeof (this.value1[0]) == "undefined") {
            //         end = null
            //     } else {
            //         end = this.convert(this.value1[1])
            //     }

            //     console.log(start)
            //     console.log(end)
            //     let productId = 0
            //     if (typeof (this.pagination.queryString) == "undefined") {
            //         productId = null
            //     } else {
            //         productId = this.pagination.queryString
            //     }

            //     //发送ajax请求
            //     axios.get("/lesson/getByCondition?productId=" + productId + "&start=" + start + "&end=" + end).then((res) => {
            //         console.log(this.pagination.queryString)
            //         console.log(res)
            //         this.dataList = res.data;
            //     });
            // },
            // convert(time) {
            //     const date = new Date(time)
            //     return date.getTime();
            // },
            //弹出编辑窗口
            handleUpdate(row) {
                // console.log(row);   //row.id 查询条件
                //查询数据，根据id查询
                axios.get("/activity/getEditInfo?id=" + row.activityId).then((res) => {
                    // console.log("formdata" + JSON.stringify(this.formData))
                    // console.log(res.data.data);
                    console.log(res.data)
                    if (res.code === 1) {
                        // console.log(res)
                        //展示弹层，加载数据
                        this.dialogFormVisible4Edit = true;
                        this.formData = res.data;
                    } else {
                        this.$message.error(res.msg);
                    }
                });
            },
            selectByAddress() {
                console.log(this.formData_);
                axios({
                    method: 'POST',
                    url: '/activity/activate',
                    data: {
                        area: this.formData_.area,
                        id: this.formData_.id
                    }
                }).then((res) => {
                    if (res.code === 1) {
                        this.editDialogFormVisible = false;
                        this.$message.success('激活成功')
                        // this.dataList = res.data;
                    } else {
                        // this.$message.error('查询失败')
                        this.$message.error('激活失败')
                    }
                })
            },
            // 删除
            handleActivate(row) {
                console.log(row.activityId)
                console.log(this.formData_.id);
                this.formData_.id = row.activityId
                console.log(this.formData_.id);
                this.editDialogFormVisible = true

                //     //2.做激活业务
                //     axios({
                //         url: '/activity/activate?id=' + row.activityId,
                //         method: 'POST',
                //     }).then((res) => {
                //         console.log(res)
                //         if (res.code === 1) {
                //             this.$message.success("激活成功");
                //         } else {
                //             this.$message.error("激活失败");
                //         }
                //     }).finally(() => {
                //         this.getAll();
                //     }).catch(() => {
                //     //3.取消删除
                //     this.$message.warning("取消激活操作");
                // });
            },
            //编辑
            handleEdit() {
                //发送ajax请求
                axios.put("/activity/updateEditInfo", this.formData).then((res) => {
                    console.log(this.formData)
                    //如果操作成功，关闭弹层，显示数据
                    if (res.code === 1) {
                        this.dialogFormVisible4Edit = false;
                        this.$message.success("修改成功");
                    } else if (res.code === 0) {
                        this.$message.error(res.msg);
                    } else {
                        this.$message.error(res.msg);
                    }
                }).finally(() => {
                    this.getAll();
                });
            },
        },
    })

</script>

</html>